<template>
  <div class="operationMenu">
    <img src="/static/img/logo.png" alt="" class="logo" />
    <div class="main">
      <!-- <p class="title">首届“中德安普杯”全国职业院校(高职组)</p> -->
      <p class="title">业财税融合暨大数据管理会计应用能力大赛</p>
      <div class="menu1">
        <ul>
          <li
            v-for="(item, index) in judgmentMenuList"
            :key="item.name"
            @click="getproexamlistbytaskidFn(index + 1)"
          >
            <img :src="item.url" alt="" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
      <div class="menu2"></div>
    </div>
    <p class="bottom">
      湖南中德安普大数据网络科技有限公司 版权所有 湘ICP备16009530号-2 湘公备
      43010302001043
    </p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "operationMenu",
  data() {
    return {
      // taskInfo: [],//考试信息
      judgmentMenuList: [
        {
          name: "赛务管理",
          url: "/static/img/swgl.png",
        },
        {
          name: "抽岗管理",
          url: "/static/img/cggl.png",
        },
        {
          name: "开封题库",
          url: "/static/img/kftk.png",
        },
        {
          name: "实时监控",
          url: "/static/img/ssjk.png",
        },
        {
          name: "成绩导出",
          url: "/static/img/cjdc.png",
        },
      ],
      jumpOk: true,
    };
  },
  created() {
    // this.onGetPracticeGroupList()
    // this.getproexamlistbytaskidFn()
  },
  mounted() {
    setTimeout(() => {
      this.onGetPracticeGroupList();
    }, 500);
  },
  methods: {
    jumpFn(type, status) {
      //1 赛务管理 2 抽岗管理  3 开封题库  4 实时监控  5 成绩导出
      let path = "";
      switch (type) {
        case 1:
          path = "/saiWuManagement";
          break;
        case 2:
          path = "/samplingPost";
          break;
        case 3:
          path = "/openQuestionBank";
          break;
        case 4:
          path = "/eventMonitoring";
          break;
        case 5:
          path = "/eventResultsStatistical";
          break;
        default:
          path = "";
          break;
      }
      if (type == 2 || type == 3) {
        if (status == "进行中") {
          this.$notify({
            title: "提示",
            type: "info",
            message: "考试已开始，不可进入！",
          });
          return;
        } else if (status == "已结束") {
          this.$notify({
            title: "提示",
            type: "info",
            message: "考试已结束，不可进入！",
          });
          return;
        }
      }
      if (type == 4 && status == "未开始") {
        this.$notify({
          title: "提示",
          type: "info",
          message: "考试未开始，不可进入！",
        });
        return;
      }
      if (type == 5 && status != "已结束") {
        this.$notify({
          title: "提示",
          type: "info",
          message: "考试未结束，不可进入！",
        });
        return;
      }
      this.$router.push({
        path,
      });
    },
    //根据taskId获取考试信息
    getproexamlistbytaskidFn(type) {
      // this.$api.examProvincialCompetitionTaskService
      //   .getproexamlistbytaskid()
      //   .then((res) => {
      //     console.log(res,'根据taskId获取考试信息');
      //     if (res.Code == 200) {
      //       this.jumpFn(type, res.Data[0].VenuesStatus);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err, "err");
      //   });
      this.jumpFn(type,4)
    },
    ...mapActions([
      "onJoinGroup", //申请加入群组
      "onGetGroupinfo", //获取群组信息
      "onGetPracticeGroupList", //查询群聊列表
    ]),
  },
  computed: {
    ...mapGetters({
      userInfo: ["userInfo"],
      groupList: ["onGetPracticeGroupList"], //群聊列表
    }),
  },
  watch: {
    groupList: {
      handler(val) {
        let flg = false;
        val.forEach((v) => {
          if (v.groupid == this.userInfo.TaskImGroupId) {
            flg = true;
          }
        });
        if (!flg) {
          this.onJoinGroup({ select_groupid: this.userInfo.TaskImGroupId });
        }
      },
    },
  },
};
</script>

<style lang="less">
.operationMenu {
  width: 100vw;
  height: 100vh;
  min-width: 1440px;
  min-height: 600px;
  background: url("/static/img/operationMenuBg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  p {
    margin-bottom: 0;
  }
  .main {
    position: absolute;
    width: 100%;
    top: 41%;
    transform: translateY(-50%);
    .title {
      text-align: center;
      font-size: 28px;
      font-family: RTWSShangGo;
      color: rgba(255, 255, 255, 1);
      line-height: 36px;
      text-shadow: 0px 2px 3px rgba(13, 61, 155, 1);
    }
    .menu1 {
      ul {
        width: 100%;
        text-align: center;
        margin-top: 86px;
        li {
          display: inline-block;
          box-sizing: border-box;
          padding: 49px 0;
          width: 166px;
          height: 180px;
          margin-right: 12px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          cursor: pointer;
          &:nth-of-type(1) {
            img {
              margin-left: 46px;
            }
          }
          &:nth-of-type(2) {
            img {
              margin-left: 48px;
            }
          }
          &:nth-of-type(3) {
            img {
              margin-left: 49px;
            }
          }
          &:nth-of-type(4) {
            img {
              margin-left: 49px;
            }
          }
          &:nth-of-type(5) {
            margin-right: 0;
            img {
              margin-left: 45px;
            }
          }
          img {
            width: 95px;
            height: 40px;
            display: block;
            margin-bottom: 15px;
          }
          p {
            text-align: center;
            font-size: 16px;
            font-family: PingFangHK-Regular, PingFangHK;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
    }
  }
  .logo {
    position: absolute;
    left: 40px;
    top: 30px;
  }
  .bottom {
    font-size: 12px;
    font-family: PingFangHK-Regular, PingFangHK;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
  }
}
</style>
